<template>
  <div class="rmb-converter">
    <div class="header">
      <h2>人民币金额转换</h2>
      <p>输入阿拉伯数字金额和百分比，转换为对应的人民币大写金额</p>
    </div>

    <div class="converter-container">
      <!-- 输入区域 -->
      <div class="input-section">
        <h3>输入信息</h3>
        
        <div class="input-group">
          <label for="amount">金额 (元):</label>
          <input 
            type="number" 
            id="amount"
            v-model.number="amount" 
            placeholder="请输入金额，例如: 10000"
            class="amount-input"
            @input="calculateResults"
          />
        </div>

        <div class="input-group">
          <label for="percentages">百分比分配:</label>
          <input 
            type="text" 
            id="percentages"
            v-model="percentagesInput" 
            placeholder="请输入百分比，用逗号分隔，例如: 10,60,30"
            class="percentage-input"
            @input="calculateResults"
          />
          <small class="input-hint">多个百分比用逗号分隔，总和应为100%</small>
        </div>

        <div class="validation-info">
          <div v-if="percentageSum !== 100 && percentages.length > 0" class="warning">
            ⚠️ 百分比总和为 {{ percentageSum }}%，建议调整为100%
          </div>
          <div v-else-if="percentageSum === 100" class="success">
            ✅ 百分比总和正确
          </div>
        </div>
      </div>

      <!-- 结果区域 -->
      <div class="results-section">
        <h3>转换结果</h3>
        
        <div v-if="amount > 0" class="result-item">
          <h4>总金额大写:</h4>
          <div class="result-value total-amount">
            {{ convertToChineseAmount(amount) }}
          </div>
        </div>

        <div v-if="distributedAmounts.length > 0" class="distributed-results">
          <h4>按百分比分配:</h4>
          <div 
            v-for="(item, index) in distributedAmounts" 
            :key="index"
            class="result-item distributed-item"
          >
            <div class="percentage-label">
              {{ item.percentage }}% ({{ item.amount.toFixed(2) }}元)
            </div>
            <div class="result-value">
              {{ item.chineseAmount }}
            </div>
          </div>
        </div>

        <div v-if="amount === 0 && percentagesInput === ''" class="empty-state">
          <p>请输入金额和百分比开始转换</p>
        </div>
      </div>
    </div>

    <!-- 使用示例 -->
    <div class="example-section">
      <h3>使用示例</h3>
      <div class="example-card">
        <div class="example-input">
          <strong>输入:</strong><br>
          金额: 10000<br>
          百分比: 10,60,30
        </div>
        <div class="example-output">
          <strong>输出:</strong><br>
          总金额: 壹万元整<br>
          10%: 壹仟元整<br>
          60%: 陆仟元整<br>
          30%: 叁仟元整
        </div>
      </div>
    </div>

    <!-- 提示消息 -->
    <div v-if="message" :class="['message', messageType]">
      {{ message }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const amount = ref<number>(0)
const percentagesInput = ref<string>('')
const message = ref('')
const messageType = ref<'success' | 'error'>('success')

// 解析百分比输入
const percentages = computed(() => {
  if (!percentagesInput.value.trim()) return []
  return percentagesInput.value
    .split(',')
    .map(p => parseFloat(p.trim()))
    .filter(p => !isNaN(p) && p > 0)
})

// 计算百分比总和
const percentageSum = computed(() => {
  return percentages.value.reduce((sum, p) => sum + p, 0)
})

// 计算分配金额
const distributedAmounts = computed(() => {
  if (amount.value <= 0 || percentages.value.length === 0) return []
  
  return percentages.value.map(percentage => {
    const distributedAmount = (amount.value * percentage) / 100
    return {
      percentage,
      amount: distributedAmount,
      chineseAmount: convertToChineseAmount(distributedAmount)
    }
  })
})

// 数字转中文大写金额
const convertToChineseAmount = (num: number): string => {
  if (num === 0) return '零元整'
  if (num < 0) return '负' + convertToChineseAmount(-num)
  
  const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
  const units = ['', '拾', '佰', '仟']
  const bigUnits = ['', '万', '亿', '兆']
  
  // 处理小数部分
  const parts = num.toFixed(2).split('.')
  const integerPart = parseInt(parts[0])
  const decimalPart = parseInt(parts[1])
  
  let result = ''
  
  // 转换整数部分
  if (integerPart === 0) {
    result = '零'
  } else {
    result = convertIntegerPart(integerPart, digits, units, bigUnits)
  }
  
  result += '元'
  
  // 处理小数部分
  if (decimalPart === 0) {
    result += '整'
  } else {
    const jiao = Math.floor(decimalPart / 10)
    const fen = decimalPart % 10
    
    if (jiao > 0) {
      result += digits[jiao] + '角'
    }
    if (fen > 0) {
      result += digits[fen] + '分'
    }
  }
  
  return result
}

// 转换整数部分
const convertIntegerPart = (num: number, digits: string[], units: string[], bigUnits: string[]): string => {
  if (num === 0) return ''
  
  let result = ''
  let bigUnitIndex = 0
  
  while (num > 0) {
    const segment = num % 10000
    if (segment > 0) {
      const segmentStr = convertSegment(segment, digits, units)
      result = segmentStr + bigUnits[bigUnitIndex] + result
    }
    num = Math.floor(num / 10000)
    bigUnitIndex++
  }
  
  return result
}

// 转换四位数段
const convertSegment = (num: number, digits: string[], units: string[]): string => {
  if (num === 0) return ''
  
  let result = ''
  let unitIndex = 0
  let hasZero = false
  
  while (num > 0) {
    const digit = num % 10
    
    if (digit === 0) {
      hasZero = true
    } else {
      if (hasZero && result !== '') {
        result = '零' + result
      }
      result = digits[digit] + units[unitIndex] + result
      hasZero = false
    }
    
    num = Math.floor(num / 10)
    unitIndex++
  }
  
  return result
}

// 计算结果
const calculateResults = () => {
  // 这里可以添加额外的计算逻辑或验证
}

// 显示消息
const showMessage = (msg: string, type: 'success' | 'error') => {
  message.value = msg
  messageType.value = type
  setTimeout(() => {
    message.value = ''
  }, 3000)
}
</script>

<style scoped>
.rmb-converter {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h2 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.header p {
  color: #7f8c8d;
  font-size: 14px;
}

.converter-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .converter-container {
    grid-template-columns: 1fr;
  }
}

.input-section,
.results-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.input-section h3,
.results-section h3 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 18px;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #495057;
}

.amount-input,
.percentage-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.amount-input:focus,
.percentage-input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.input-hint {
  display: block;
  margin-top: 5px;
  color: #6c757d;
  font-size: 12px;
}

.validation-info {
  margin-top: 15px;
}

.warning {
  color: #e67e22;
  font-size: 14px;
  font-weight: 500;
}

.success {
  color: #27ae60;
  font-size: 14px;
  font-weight: 500;
}

.result-item {
  margin-bottom: 20px;
}

.result-item h4 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 16px;
}

.result-value {
  background: #fff;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #e9ecef;
  font-family: 'Microsoft YaHei', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #2c3e50;
}

.total-amount {
  background: #e8f5e8;
  border-color: #27ae60;
  color: #27ae60;
  font-size: 18px;
  font-weight: 600;
}

.distributed-results {
  margin-top: 20px;
}

.distributed-item {
  margin-bottom: 15px;
}

.percentage-label {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 5px;
  font-weight: 500;
}

.empty-state {
  text-align: center;
  color: #6c757d;
  font-style: italic;
  padding: 40px 20px;
}

.example-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  margin-bottom: 20px;
}

.example-section h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.example-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  background: #fff;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

@media (max-width: 768px) {
  .example-card {
    grid-template-columns: 1fr;
  }
}

.example-input,
.example-output {
  font-size: 14px;
  line-height: 1.6;
}

.example-input strong,
.example-output strong {
  color: #2c3e50;
}

.message {
  padding: 12px 20px;
  border-radius: 6px;
  margin-top: 20px;
  font-weight: 500;
}

.message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
</style>